<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        
        <!-- jquery -->
        <script src="/lianxijs/libs/jquery/jquery-1.11.1.min.js"></script>
        
        <!-- http插件 -->
        <script src="/lianxijs/libs/http/axios.min.js"></script>
        
        <!-- 弹窗插件 -->
        <link rel="stylesheet" type="text/css" href="/lianxijs/libs/sweetalert/sweetalert.css"  />
        <script src="/lianxijs/libs/sweetalert/sweetalert-dev.js"></script>
        
        <!-- 时间格式化插件 -->
        <script src="/lianxijs/libs/moment/moment.min.js"></script>   
        
        <!-- 精确计算插件 -->
        <!-- <script src="/lianxijs/libs/number-precision/index.iife.js"></script> -->
        <script src="/lianxijs/libs/number-precision/index.umd.js"></script>
        
        <!-- 带搜索的下拉框 -->
        <link rel="stylesheet" type="text/css" href="/lianxijs/libs/select2/select2.css"/>
        <script src="/lianxijs/libs/select2/select2.js"></script>
        
    </head>
    <body>
           <!-- 下载文件示例 -->
        <h3>下载文件示例</h3>
        <div>
            <button onClick="syncDown()">点我同步下载</button>
        </div>
        <br/>
        <div>
            <button onClick="asyncDown()">点我异步下载</button>
        </div>
        <br/>
		<div>
			<form action="/files/文件.docx" method="post">
				<input type="submit" value="表单提交下载"/>
		
			</form>
		</div>
		<div>
			<a href="/lianxijsdata:text/plain;base64,bmFkc2tsZm5sYXNrZGxnamFkbGpnYWRzamc" download="文件.txt">异步下载原理</a>
		</div>
    </body>
</html>
<script>
	    // 同步下载
    let syncDown = function () {
        // 这里有些浏览器会自动对中文进行urlEncode编码，所以不需要手动编码
        //window.location.href = "/files/文件.docx";
        // 如果需要手动编码
         window.location.href = encodeURI("/files/文件.docx");
    };
    
    // 异步下载
    let asyncDown = function () {
        // 第一步：创建需要的对象，需要兼容浏览器
        let httpRequest = null;
        if (window.XMLHttpRequest) {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            httpRequest = new XMLHttpRequest();
        } else {
            // IE6, IE5 浏览器执行代码
            httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        }       
        // 第二步：打开连接，这里使用post请求
        httpRequest.open('POST', '/files/文件.docx', true); 
        // 设置请求头 注：post方式必须设置请求头（在建立连接后设置请求头）
        httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        // 返回类型blob
        httpRequest.responseType = "blob"; 
        // 发送请求 将请头体写在send中（请求参数）
        httpRequest.send('name=teswe&ee=ef');
        
        /**
         * 获取数据后的处理程序
         */
        // 请求后的回调接口，可将请求成功后要执行的程序写在其中
        httpRequest.onreadystatechange = function () {
            //验证请求是否发送成功
            if (httpRequest.status === 200 && httpRequest.readyState === 4) {
                download(httpRequest.response, "文件.docx");
            }
        }
    };
    
    // 创建a标签，下载文件
    let download = function (blob, fileName) {
        // 创建一个<a href="/lianxijsblob字符串" download="文件.docx"></a>标签
        let a = document.createElement('a');
        a.href = window.URL.createObjectURL(blob);;
        a.download = fileName;
        $("body").append(a);
        a.click();
        $(a).remove();
    };
</script>